<template>
	<!--会员中心-->
	<view class="page-content">
		<view class="page-top">
			<template v-if="companyInfo.exp_time > datatime">
			     <view class="tip">提示:您的品牌将在<text class="tiptxt">{{parseTime(companyInfo.exp_time,'{y}年{m}月{d}日')}}到期</text>，请及时前往PC端续签。</view>
			</template>
			<template v-else>
			     <view class="tip">提示:您的品牌已在<text class="tiptxt">{{parseTime(companyInfo.exp_time,'{y}年{m}月{d}日')}}到期</text>，请及时前往PC端续签。</view>
			</template>
			
			<view class="cen">
				<view class="top-box">
					<image class="img-icon" :src="$mAssetsPath.icon_diannao"></image>
					<view class="text">官方链接：{{objdata.url}}</view>
				</view>
				<view class="button" @click="tocopy(objdata.url)">复制网址</view>
			</view>
		</view>
		<view class="page-body">
			<!--富文本-->
			<view class="body-box">
				<rich-text class="con-text" :nodes='objdata.content' decode='true'></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		getMemberCenterInfos,//会员中心
	} from '@/common/api.js'
	import {
		parseTime
	} from '@/common/util'
	export default {
		components: {},
		data() {
			return {
				objdata: {
					time: '您的品牌',
					url: 'https://www.baidu.com',
					content: ''
				},
				user_statu: { //权限
					add_statu: true,
					replace_statu: false,
					stick_del_statu: false,
					contact: true,
				},
				datatime:0
			}
		},
		computed: {
			...mapGetters(['companyInfo','userInfo','userRole']),
		},
		onShow() {
			this.getdata();
			this.datatime = Math.round(new Date().getTime()/1000);
		},
		onLoad(option) {
			console.log(222, option)
		},
		methods: {
			parseTime,
			getdata(){
				getMemberCenterInfos().then(res=>{
					if(res.code === 2000){
						this.objdata.url = res.data.url;
						this.objdata.content = this.formatRichText(res.data.content);
					}
				})
			},
			//复制
			tocopy(link){
				uni.setClipboardData({
				    data: link,
				    success: function () {
						console.log('success');
						uni.showToast({
							title:'复制成功！',
							icon:'none',
							duration:200
						})
				        
				    }
				});
			},
			//富文本转化
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			/* if (this.$refs.indexPage) {
				this.$refs.indexPage.getData()
				console.log(1231)
			} */
		}
	}
</script>

<style lang="scss">
	.page-content {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: $uni-bg-color;

		.page-top {
			display: flex;
			flex-direction: column;


			.cen {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx;

				.top-box {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 40rpx;

					.img-icon {
						width: 100rpx;
						height: 90rpx;
						margin-right: 40rpx;
					}

					.text {
						font-size: 28rpx;
						font-weight: 400;
						color: $font-color-3;
					}
				}

				.button {
					height: 80rpx;
					width: 100%;
					border: 1rpx solid $border-color-blue;
					line-height: 80rpx;
					text-align: center;
					font-size: 28rpx;
					color: $font-color-b3;
				}
			}

			.tip {
				font-size: 24rpx;
				font-weight: 400;
				line-height: 17px;
				color: $font-color-9;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 30rpx;
				background: $uni-bg-color-grey;

				.tiptxt {
					color: $uni-but-bg-color;
				}
			}
		}

		.page-body {
			display: flex;
			flex-direction: column;

			.body-box {
				padding: 0 30rpx;

				.con-text {
					width: 100%;
					display: flex;
					flex-direction: column;
					font-size: 28rpx;
					color: #666;
					line-height: 40rpx;

					image {
						width: 100% !important;
						max-width: 100% !important;
					}
				}
			}
		}
	}
</style>
